<template>
  <FormModal v-model:open="visible" :title="formTitle" :width="width" centered>
    <IntegratedForm
      ref="formRef"
      v-model:value="formValue"
      layout="horizontal"
      :options="formOption"
      :rules="formRules"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      @change="onFormChange">
      <template v-if="formValue.val_type === 'checkbox' || formValue.val_type === 'radio'">
        <a-form-item
          v-for="(key, index) in formValue.desc"
          :key="key"
          :name="['desc', index]"
          :rules="formRules.desc"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          :colon="index === 0">
          <template #label>
            {{ index === 0 ? '字段选项' : '' }}
          </template>
          <a-space>
            <a-input
              v-model:value="formValue.desc[index]"
              class="w-280px"
              placeholder="请填写字段选项" />
            <a-button
              v-if="formValue.desc.length > 1"
              type="link"
              danger
              @click="removeDesc(index)">
              <template #icon>
                <span class="i-ant-design:minus-circle-outlined" />
              </template>
            </a-button>
          </a-space>
        </a-form-item>
        <a-form-item :colon="false">
          <template #label></template>
          <div class="w-80%">
            <a-button block type="dashed" @click="addDesc">
              <template #icon>
                <span class="i-ant-design:plus-outlined" />
              </template>
            </a-button>
          </div>
        </a-form-item>
      </template>
    </IntegratedForm>
    <template #footer-right>
      <a-button type="primary" :loading="loading" @click="onSubmit">提交</a-button>
      <a-button @click="onCancel">取消</a-button>
    </template>
  </FormModal>
</template>
<script setup lang="ts">
import { useForm, type useFormProps, type useFormEmits } from '@/hooks/curd';
import { type FormChangeEvent, FormModal, IntegratedForm } from '@ykst/components';
import { formOption, formRules } from './form';
import { staffSetting, type StaffSettingReqData } from '@/apis/staffSetting';

export interface MethodFormValue extends Omit<StaffSettingReqData, 'desc'> {
  id?: number;
  desc: string[];
}

const props = withDefaults(defineProps<useFormProps<MethodFormValue>>(), {
  defaultValue: () => {
    return {
      title: '',
      val_type: 'text',
      is_required: false,
      status: true,
      desc: [],
    };
  },
});
const emits = defineEmits<useFormEmits>();

const {
  loading,
  visible,
  formValue,
  formRef,
  width,
  formTitle,
  formItemLayout,
  onCancel,
  onSubmit,
} = useForm<StaffSettingReqData, MethodFormValue>(props, emits, {
  actionTitle: props.title,
  requestFunc: staffSetting,
  beforeSubmit(params) {
    const { desc, id, ...rest } = params.data!;
    return {
      ...params,
      data: {
        ...rest,
        desc: JSON.stringify(
          desc.reduce(
            (prev, next, index) => {
              prev[index] = next;
              return prev;
            },
            {} as Record<string, string>,
          ),
        ),
      },
    };
  },
});

function removeDesc(index: number) {
  formValue.value.desc.splice(index, 1);
}
function addDesc() {
  formValue.value.desc.push('');
}

const HAS_DESC_VAL_TYPE = ['checkbox', 'radio'];
function onFormChange({ name }: FormChangeEvent) {
  if (name === 'val_type') {
    // 如果不是 'checkbox', 'radio' 清空 desc
    if (!HAS_DESC_VAL_TYPE.includes(formValue.value.val_type)) {
      formValue.value.desc = [''];
    }
  }
}
</script>
